<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-row items-center section_3 space-x-31">
				<u-search class="search" placeholder="搜索..." :show-action="true" actionText="搜索"
					actionStyle="color:#74B72E" :animation="false" v-model="keyword" @search="toSearch"
					@custom="toSearch"></u-search>
			</view>
			<view class="flex-col section_4" v-if="goods.length<=0&&!search">
				<text class="self-start font_2 text_4">热门搜索</text>
				<view class="flex-row group_2">
					<view class="flex-col justify-start items-center text-wrapper" @click="tosearchIn(item)"
						v-for="(item,index) in searchList" :key="index">
						<text class="">{{item}}</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_5 space-y-5" v-if="goods.length<=0&&!search">
				<text class="self-start font_2 text_5" v-if="list.length>0">搜索历史</text>
				<view class="flex-col">
					<view class="flex-row group_5 list-item space-x-11" @click="tosearchIn(item)" :key="i"
						v-for="(item, i) in list">
						<image class="image_9" src="/static/history.png" />
						<text class="font_4">{{item}}</text>
					</view>
				</view>
				<view class="flex-row justify-center items-center group_5" style="border-top: solid 1rpx #eee;"
					@click="toDelHis" v-if="list.length>0">
					<image src="/static/delete.png" mode="" class="delete"></image>
					<text class="font_4">清空历史记录</text>
				</view>
			</view>
			<view class="flex-col list space-y-20" v-if="!search">
				<view class="flex-row list-item" @click="toBuy(item.shop_id)" v-for="(item, index) in goods"
					:key="index">
					<image class="shrink-0 self-center image_7" :src="item.cover"  />
					<view class="flex-col flex-auto self-center group_2 space-y-23">
						<view class="flex-row items-center space-x-8">
							<text class="font_2">{{item.shop_name}}</text>
							<image class="image_8" v-if="item.is_license==1" src="/static/success.png" />
						</view>
						<view class="flex-row">
							<text class="font_3">{{item.score}}分</text>
							<view class="shrink-0 section5 view"></view>
							<text class="font_4 text_6">人均￥{{item.avg_amounts}}</text>
							<view class="shrink-0 section5 view_2"></view>
							<text class="font_4 text_7">销售{{item.sales}}</text>
						</view>
						<view class="flex-col justify-start items-center self-start text-wrapper" v-for="(item1,index1) in item.tags" :key="index1">
							<text class="font_5 text_8">{{item1}}</text>
						</view>
					</view>
					<text class="self-start font_6 text_9">距我{{item.distance}}</text>
				</view>
			</view>
			<view class="flex-col justify-center items-center list space-y-30 font_8"
				style="height: 100rpx;color: #333;" v-else>暂无数据</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	onMounted(() => {
		console.log("onMounted");
	})
	onShow(() => {
		if (uni.getStorageSync("history")) {
			list.value = JSON.parse(uni.getStorageSync("history"))
			historyList.value = JSON.parse(uni.getStorageSync("history"))
		}
		if (uni.getStorageSync('address')) {
			address.value = uni.getStorageSync('address')
		}
		console.log(list.value);
	})
	onLoad((oprion) => {
		console.log("onload");
		if (oprion.keyword) {
			keyword.value = oprion.keyword
		}
		getDate()
	})
	onReachBottom(() => {
		console.log("上拉");
		p.value++
		getlist()
	})
	onBeforeUnmount(() => {
		uni.removeStorageSync('history')
		let history = [...new Set(historyList.value)];
		console.log(history, "history");
		uni.setStorageSync('history', JSON.stringify(history))
		setTimeout(() => {
			console.log(JSON.parse(uni.getStorageSync("history")));
		}, 200)
	})
	//搜索框内容
	let keyword = ref('')
	//搜索结果
	let goods = ref([])
	let search = ref(false)
	let p = ref(1)

	let address = ref({
		city_name: '',
		address: '',
		district_name: '',
		province_name: ''
	})

	//热门搜索
	let searchList = ref([])

	//历史记录
	let list = ref([])
	let historyList = ref([])

	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.IndexInfo.search_words).then(res => {
			// indexList.swiperUrl.push(...res.data.banners)
			console.log(res, 'search_words');
			searchList.value = res.data.keywords
		}).catch(err => {
			console.log(err, 'ShopInfo.search_words');
		})
	}
	const getList = () => {
		proxy.$req.requestPOST(proxy.$api.ShopInfo.getList, {
			lng: uni.getStorageSync('longitude'),
			lat: uni.getStorageSync('latitude'),
			keywords: keyword.value,
			p: p.value
		}).then(res => {
			console.log(res, 'getList');
			goods.value = [...goods.value, ...res.data.list]
			if (goods.value.length == 0) {
				search.value = true
			}
			console.log(goods);
		})
	}
	const toSearch = () => {
		if (keyword.value == '') {
			uni.showToast({
				title: '请先输入关键词',
				icon: 'none'
			})
			return
		}
		historyList.value.push(keyword.value)
		goods.value.length = 0
		p.value = 1
		getList()
	}
	const toDelHis = () => {
		console.log("清空历史记录");
		uni.removeStorageSync('history')
		list.value.length = 0
		historyList.value.length = 0
	}
	const tosearchIn = (v) => {
		keyword.value = v
		toSearch()
	}
	const toBuy = (shop_id) => {
		uni.navigateTo({
			url: '/pages/businessDetail/businessDetail?shop_id=' + shop_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		height: 100vh;

		.group {
			// padding-bottom: 662rpx;
			// overflow-y: auto;

			.section_3 {
				padding: 25rpx 28rpx;
				background-color: #ffffff;

				.search {
					height: 68rpx;
				}

				.space-x-13 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 13rpx;
					}
				}

				.image_7 {
					width: 57rpx;
					height: 29rpx;
				}
			}

			.space-x-31 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 31rpx;
				}
			}

			.section_4 {
				padding: 29rpx 28rpx;
				padding-bottom: 0;
				background-color: #ffffff;

				.text_4 {
					margin-left: 4rpx;
					line-height: 29rpx;
				}

				.group_2 {
					margin-top: 29rpx;
					flex-wrap: wrap;

					.text-wrapper {
						padding: 16rpx 32rpx;
						background-color: #f5f5f5;
						border-radius: 29rpx;
						border: solid 1rpx #f5f5f5;
						margin-bottom: 24rpx;
						margin-right: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}

			}

			.section_5 {
				padding: 33rpx 28rpx 4rpx;
				background-color: #ffffff;

				.text_5 {
					line-height: 28rpx;
				}

				.group_5 {
					padding: 35rpx 0 26rpx;

					.image_9 {
						width: 26rpx;
						height: 26rpx;
					}

					.font_4 {
						font-size: 26rpx;
						font-family: PingFang SC;
						line-height: 25rpx;
						color: #656565;
					}
				}

				.list-item {
					&:not(:last-of-type) {
						border-bottom: solid 1rpx #ededed;
					}
				}

				.space-x-11 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 11rpx;
					}
				}

				.delete {
					width: 22rpx;
					height: 24rpx;
					margin-right: 13rpx;
				}
			}

			.space-y-5 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 5rpx;
				}
			}

			.font_2 {
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #323232;
			}

			.list {
				padding: 0 30rpx;
			
				.list-item {
					padding: 32rpx 28rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
			
					.image_7 {
						border-radius: 20rpx;
						width: 196rpx;
						height: 148rpx;
					}
			
					.group_2 {
						margin-left: 20rpx;
			
						.space-x-8 {
			
							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 8rpx;
							}
			
							.font_2 {
								font-size: 32rpx;
								font-family: PingFangSC;
								line-height: 31rpx;
								color: #333333;
							}
			
							.image_8 {
								width: 22rpx;
								height: 25rpx;
							}
						}
			
						.font_3 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 22rpx;
							color: #f52c2c;
						}
			
						.section5 {
							background-color: #c1c1c1;
							border-radius: 0.5rpx;
							width: 1rpx;
							height: 20rpx;
						}
			
						.view {
							margin-left: 9rpx;
						}
			
						.font_4 {
							font-size: 24rpx;
							font-family: PingFangHeiTC;
							line-height: 22rpx;
							color: #585858;
						}
			
						.text_6 {
							margin-left: 11rpx;
							line-height: 23rpx;
						}
			
						.view_2 {
							margin-left: 11rpx;
						}
			
						.text_7 {
							margin-left: 16rpx;
							line-height: 23rpx;
						}
			
						.text-wrapper {
							padding: 8rpx 0;
							background-color: #eff5f0;
							border-radius: 6rpx;
							width: 80rpx;
			
							.font_5 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 22rpx;
								color: #54bc6e;
							}
			
							.text_8 {
								line-height: 21rpx;
							}
						}
					}
			
					.space-y-23 {
			
						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 23rpx;
						}
					}
			
					.font_6 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 22rpx;
						color: #aeaeae;
					}
			
					.text_9 {
						margin-left: 6rpx;
						margin-top: 115rpx;
					}
				}
			}
			
			.space-y-20 {
			
				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}
		}
	}
</style>